<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../../utils/font/iconfont.css" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="../../utils/bootstrap.min.css" />
    <script src="../../utils/jquery-3.6.0.js"></script>
    <script src="../../utils/bootstrap.min.js"></script>

    <link rel="stylesheet" href="../../style/technical-data/data-type.css" />
    <link rel="stylesheet" href="../../style/technical-data/data-management.css">
  </head>
  <body>
    <div class="container">
    <!-- 头部 -->
      <div class="header">
        <h1>维修调度管理系统</h1>
        <div class="user">
          <img src="../../images/user.png" class="img-circle" />
          <span>用户名</span>
        </div>
      </div>
      <div class="body">
        <!-- 左边导航栏 -->
        <div class="nav">
          <ul>
            <li>
              <span class="iconfont icon-control"></span>
              <span class="firstMenuText">控制台</span>
            </li>
            <li>
              <span class="iconfont icon-equipment"></span>
              <sp class="firstMenuText">装备管理</sp>
            </li>
            <li>
              <span class="iconfont icon-warehouse"></span>
              <sp class="firstMenuText">仓库管理</sp>
            </li>
            <li>
              <span class="iconfont icon-fix"></span>
              <span class="firstMenuText">维修管理</span>
            </li>
            <li>
              <span class="iconfont icon-personnel"></span>
              <span class="firstMenuText">人员管理</span>
            </li>
            <li>
              <span class="iconfont icon-data"></span>
              <span class="firstMenuText">数据统计</span>
            </li>
            <li>
                <div
                class="firstMenu"
                data-toggle="collapse"
                data-target="#dataMenu"
              >
                <span class="iconfont icon-technicalData"></span>
                <span class="firstMenuText">技术资料</span>
            </div>
            <ul class="secondMenu collapse" id="dataMenu">
              <li><a href="./data-type.html">资料类型</a></li>
              <li><a href="javascript:">资料管理</a></li>
            </ul>
            </li>
            <li>
                <span class="iconfont icon-rules"></span>
                <span class="firstMenuText">规章制度</span>
            </li>
            <li>
              <span class="iconfont icon-setting"></span>
              <span class="firstMenuText">系统管理</span>
            </li>
          </ul>
        </div>
        <!-- 右边内容 -->
        <div class="content">
          <div class="contentBox">
            <div class="title">
              <h2>资料管理</h2>
              <div class="classify">
                <button class="add-classify">添加分类</button>
              </div>
            </div>
            <!-- 搜索 -->
            <div class="search form-inline">
                <div class="searchInp">
                        <div>
                          <span>资料名称</span>
                          <input type="text" name="" id="dataName" class="form-control" placeholder="请输入资料关键词">
                        </div>
                        <div>
                          <span>资料类型</span>
                          <select name="" id="dataModel" class="form-control">
                            <option>全部</option>
                            <option>维修一部</option>
                            <option>维修二部</option>
                            <option>维修三部</option>
                          </select>
                        </div>
                        <div>
                          <span>专业类别</span>
                          <select name="" id="professionalCategory" class="form-control">
                            <option>全部</option>
                            <option>装备使用</option>
                            <option>装备制度</option>
                            <option>装备保障</option>
                          </select>
                        </div>
                </div>
                <div class="searchBtn">
                  <button class="btn btn-primary reset">重置</button>
                  <button class="btn btn-success inquiry">查询</button>
                </div>
            </div>
            <!-- 表格 -->
            <table class="table">
              <thead>
                <tr>
                  <th>资料名称</th>
                  <th>资料类型</th>
                  <th>专业类别</th>
                  <th>装备型号</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                    <td>轻型步战车维修手册</td>
                    <td>维修一部</td>
                    <td>装备使用</td>
                    <td>A01轻型步战车</td>
                    <td>
                        <button class="btn btn-primary view">查看</button>
                        <button class="btn btn-danger download">下载</button>
                    </td>
                </tr>
              </tbody>
            </table>
            <!-- 分页器 -->
            <div class="paginationBox">
              <span>共<span class="all-data-page">2</span>页/<span class="all-data">20</span>条数据</span>
              <ul class="pagination">
                <li id="paginationLeft">
                  <a href="#">&laquo;</a>
                </li>
                <!-- <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li> -->
                <li id="paginationRight">
                  <a href="#">&raquo;</a>
                </li>
              </ul>
              <span>转至</span>
              <ul class="numberOfPage">
                <li><input type="text" class="page-number" value="1"></li>
              </ul>
              <span>页</span>
              <button class="jump">跳转</button>
            </div>
            <!-- 下载资料 -->
            <div class="modal fade" id="downloadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">下载确认</h4>
                    </div>
                    <div class="modal-body">
                        <span class="delDataId"></span>
                        <span>确认下载？</span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary confirmDownload">确定</button>
                    </div>
                  </div>
                </div>
            </div>
          </div>
          
          <!-- 添加资料 -->
          <div class="contentBox2">
            <div class="title">
              <h2>添加资料</h2>
            </div>
            <div class="add-content">
              <div class="row">
                <div>
                  <span>装备型号</span>
                  <input type="text" class="form-control" placeholder="A01轻型步战车" id="addModel">
                </div>
                <div>
                  <span>专业类别</span>
                  <input type="text" class="form-control" placeholder="维修保障" id="addType">
                </div>
              </div>
              <div class="row">
                <div>
                  <span>资料类型</span>
                  <input type="text" class="form-control" placeholder="维修手册" id="addDataType">
                </div>
                <div>
                  <span>上传资料</span>
                  <label for="" class="file">
                    <span class="fileName">点击上传</span>
                    <input type="text" id="uploadFile">
                  </label>
                  
                </div>
              </div>
              <div class="row " id="row-one">
                <div id="dataIntroduce">
                  <span>资料说明</span>
                  <textarea name="" id="" cols="30" rows="10" class="introduce form-control"
                  placeholder="
                  1.维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明。

                  2.维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明。
                  
                  3.维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明。
                  
                  4.维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明。"
                  ></textarea> 
                </div>
              </div>
              <div class="btnBox">
                <button id="cancel">取消</button>  
                <button id="save">保存</button> 
              </div>
              
            </div>
          </div>
          <!-- 查看资料 -->
          <div class="contentBox3">
            <div class="title">
              <h2>资料详情</h2>
              <div class="operation">
                <button class="btn btn-primary edit">编辑</button>
                <button class="btn btn-success viewDownload">下载</button>
              </div>
            </div>
            <div class="detail">
              <span class="viewDataId"></span>
              <p>
                <span class="data-name"></span>
              </p>
              <p  class="data-type">
                <span class="data-model"></span>
                <span class="data-time">2022-8-25</span>
              </p>
              <p id="dataDetail">
                <span>1.维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情。</span>
                <span>2.维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情。</span>
                <span>3.维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情。</span>
                <span>4.维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情维修手册详情。</span>
              </p>
            </div>
            <div class="return-btn">
              <button class="returnPage">返回</button>
            </div>
            
          </div>
          <!-- 编辑 -->
          <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLabel">编辑资料</h4>
                </div>
                <div class="modal-body">
                    <span class="editDataId"></span>
                    <span><span>资料名称</span> <input type="text" name="" class="editName" placeholder="请输入资料名称"></span>    
                    <span><span>资料类型</span>  <input type="text" name="" class="editDataType" placeholder="请输入资料类型"></span>    
                    <span><span>专业类别</span>  <input type="text" name="" class="editType" placeholder="请输入专业类别"></span>    
                    <span><span>装备型号</span>  <input type="text" name="" class="editModel" placeholder="请输入装备型号"></span>    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary confirmEdit">确定</button>
                </div>
              </div>
            </div>
          </div>
          <!-- 下载 -->
          <div class="modal fade" id="viewDownloadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">下载确认</h4>
                </div>
                <div class="modal-body">
                    <span class="delDataId"></span>
                    <span>确认下载？</span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary toConfirm">确定</button>
                </div>
              </div>
            </div>
        </div>

      </div>
    </div>

    <script src="../../js/technical-data/data-management.js"></script>
  </body>
</html>
